<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-im-demo</title>
  <link rel="stylesheet" type="text/css" href="dist/vue-im.min.css">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style type="text/css">
    #app {
      width: 100%;
      height: 100%;
    }
  </style>
  <script src="data/lists.js?20180306"></script>
  <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
  <script src="dist/vue-im.min.js"></script>
</head>
<body>
  <div id="app">
    <vue-im :mine="mine" :lists="lists" :history="history" :groups-list="groups" :members-list="membersList" @on-send="handleSend" @on-view-history="handleViewHistory" ref="vueim"></vue-im>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        mine: {},
        lists: [],
        history: {},
        currentChat: null,
        membersList: lists.members,
        groups: lists.groups
      },
      methods: {
        randomData: function () {
          // var index = Math.floor(Math.random() * lists.list.length);
          var mine = lists.list[0]
          var tempLists = lists.list.filter(function (item) {
            return item.id !== mine.id
          })
          this.mine = mine
          this.lists = tempLists
        },
        handleSend: function (message) {
          let avatar
          this.lists.forEach(function (item) {
            if (item.id === message.recver) {
              avatar = item.avatar
            }
          })
          this.$refs.vueim.getMessage({
            content: `你好呀,我是${message.recvername}`,
            avatar: avatar,
            sender: message.recver,
            recver: this.mine.id,
            time: new Date().getTime(),
            sendername: message.recvername,
            recvername: this.mine.username,
            type: 'text'
          })
        },
        handleChatChange: function (chat) {
          this.currentChat = chat
        },
        handleViewHistory() {
          this.history = lists.log
        }
      },
      created: function () {
        setTimeout(() => {
          this.randomData();
        }, 0)
      }
    })

  </script>
</body>
</html>